import {
  defineComponent,
  ref,
  PropType
} from 'vue';
import {
  OptionLabel,
  TableLabel
} from './types';
import useModule from './LindadayoTable.module';
import './LindadayoTable.module.scss';

export default defineComponent({
  name: 'LindadayoTable',
  props: {
    /**
     * 表格最高高度
     */
    maxHeight: {
      type: [String, Number],
      default: ''
    },
    /**
     * 表格自定义属性展示
     */
    tableLabel: {
      type: Array as PropType<TableLabel[]>,
      default: () => []
    },
    /**
     * 表格数据源
     */
    data: {
      type: Array,
      default: () => []
    },
    /**
     * 配置需要显示的操作菜单
     */
    option: {
      type: Object as PropType<OptionLabel>,
      default: () => {}
    },
    showCheckBox: {
      // 配置是否显示全选（复选框）
      type: Boolean,
      default: false
    },
    /**
     * 是否显示索引
     */
    showIndex: {
      type: Boolean,
      default: false
    },
    turnRadio: {
      type: Boolean,
      default: false
    },
    selectedIdArr: {
      type: Array as PropType<number[] | string[]>,
      default: () => []
    },
    /**
     * 是否 隐藏文字过长
     */
    overflowText: {
      type: Boolean,
      default: false
    },
    /**
     * 加载提示
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 是否保持之前复选框的数据
     */
    keep: {
      type: Boolean,
      default: false
    },
    /**
     * 动态绑定 key 值
     */
    keyId: {
      type: String,
      default: 'id'
    },
    /**
     * 行内自定义样式配置
     */
    rowStyle: {
      type: Object,
      default: () => {
        return {
          height: '40px'
        }
      }
    },
    /**
     * 是否展示展开按钮
     */
    showExpand: {
      type: Boolean,
      default: false
    },
    /**
     * 单选模式
     */
    showRadio: {
      type: Boolean,
      default: false
    },
    selectRadioId: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit, slots }) {
    const LindadayoTable = ref(null)
    const {
      selectId,
      methods
    } = useModule(props, emit, LindadayoTable)
    return () => (
      <div v-loading={props.loading}>
        <el-table
          class='Lindadayo-table'
          ref={LindadayoTable}
          data={props.data}
          border
          highlight-current-row={props.showRadio}
          max-height={props.maxHeight}
          row-class-name={methods.tabRowClassName}
          row-style={props.rowStyle}
          cell-class-name={methods.cellClassName}
          header-row-class-name='custom-table-header'
          row-key={props.keyId}
          on-cell-click={(row, column, cell, event) => emit('cell-click', row, column, cell, event)}
          on-select={methods.handleSelectionChange}
          on-select-all={methods.handleSelectionChange}
          on-current-change={methods.rowClick}
        >
          {
            props.showRadio && <el-table-column
              label='选择'
              align='center'
              width='55'
              scopedSlots={{
                default: scope => (
                  <el-radio
                    label={scope.row.id}
                    vModel={selectId.value}
                    onChange={() => methods.rowClick(scope.row)}
                  >
                    &nbsp;
                  </el-radio>
                )
              }}
            />
          }
          {
            props.showCheckBox && <el-table-column
              key='showCheckBox'
              width='55'
              type='selection'
              reserve-selection={props.keep}
              class-name={props.turnRadio ? 'checkBoxRadio' : ''}
              align='center'
            />
          }
          {
            props.showExpand && <el-table-column
              key='showExpand'
              type='expand'
              scopedSlots={{
                default: scope => {
                  return <fragment row={scope.row}>
                    {
                      slots.expand?.()
                    }
                  </fragment>
                }
              }}
            >
            </el-table-column>
          }
          {
            props.showIndex && <el-table-column
              align='center'
              label='序号'
              width='50'
              scopedSlots={{
                default: scope => {
                  return scope.$index + 1
                }
              }}
            >
            </el-table-column>
          }
          {
            props.tableLabel.map((item: TableLabel) => {
              return <el-table-column
                key={item[props.keyId]}
                width={item.width ?? ''}
                align={item.align ?? 'center'}
                label={item.label}
                show-overflow-tooltip={props.overflowText}
                fixed={item.fixed}
                prop={item.prop}
                scopedSlots={{
                  default: (scope) => {
                    if (item.render) {
                      return <div
                        style='cursor: pointer'
                        onClick={() => item.methods && methods.handleClickon(item.methods, scope.row)}
                        domPropsInnerHTML={item.render(scope.row)}
                      >
                      </div>
                    } else {
                      return <div
                        class='text-no-wrap'
                        onClick={() => item.methods && methods.handleClickon(item.methods, scope.row)}>
                        {
                          Object.prototype.toString.call(item.prop) === '[object Array]' ? methods.propFilter(item.prop, scope.row) : (scope.row[item.prop] ?? '--')
                        }
                    </div>
                    }
                  }
                }}
              >
              </el-table-column>
            })
          }
          {
            props.option && <el-table-column
              width={props.option.width}
              label={props.option.label}
              fixed={props.option.fixed}
              align={props.option.align ?? 'center'}
              scopedSlots={{
                default: scope => {
                  return props.option.children.length && <div
                    class='flex-box'
                  >
                    {
                      props.option.children.map(item => {
                        return (typeof item.hidden === 'function' ? !item.hidden(scope.row) : !item.hidden) && (
                          item.children?.length > 0 ? <el-dropdown oncommand={({ row, cb }) => methods.handleTableButton(row, cb) }>
                            <span class='el-dropdown-link'>
                              <el-tooltip
                                class='item'
                                effect='light'
                                popper-class='Lindadayo-tooltip-primary'
                                content={typeof item.label === 'function' ? item.label(scope.row) : item.label}
                                placement='top'
                              >
                                <i
                                  class={['Lindadayo-tooltip-icon', typeof item.icon === 'function' ? item.icon(scope.row) : item.icon]}
                                  plain='true'
                                  v-permission={item.permission ?? ''}
                                />
                              </el-tooltip>
                            </span>
                            <el-dropdown-menu slot='dropdown'>
                              {item.children.map(child => (
                                (typeof child.hidden === 'function' ? !child.hidden(scope.row) : !child.hidden) && (
                                  item.type === 'inline' ? <el-dropdown-item
                                  command={{ row: scope.row, cb: child.methods }}
                                  onClick={() => methods.handleTableButton(scope.row, child.methods)}
                                >
                                  <span v-permission={child.permission ?? ''}
                                    style='display: flex;align-items: center;'
                                  >
                                    <i
                                      class={['Lindadayo-tooltip-icon', typeof child.icon === 'function' ? child.icon(scope.row) : child.icon]}
                                      style='font-size: 18px;color: #cdd1d1;padding-left: 2px;'
                                      plain='true'
                                    />
                                    <span>{child.label}</span>
                                  </span>
                                </el-dropdown-item> : <el-tooltip
                                    key={child.label}
                                    class='item'
                                    effect='light'
                                    popper-class='Lindadayo-tooltip-primary'
                                    content={typeof child.label === 'function' ? child.label(scope.row) : child.label}
                                    placement='right'
                                  >
                                    <el-dropdown-item
                                      command={{ row: scope.row, cb: child.methods }}
                                      onClick={() => methods.handleTableButton(scope.row, child.methods)}
                                    >
                                      <i
                                        class={['Lindadayo-tooltip-icon', typeof child.icon === 'function' ? child.icon(scope.row) : child.icon]}
                                        plain='true'
                                        v-permission={child.permission ?? ''}
                                      />
                                    </el-dropdown-item>
                                  </el-tooltip>
                                )
                              ))}
                            </el-dropdown-menu>
                          </el-dropdown>
                          : <el-tooltip
                            class='item'
                            effect='light'
                            popper-class='Lindadayo-tooltip-primary'
                            content={typeof item.label === 'function' ? item.label(scope.row) : item.label}
                            placement='top'
                          >
                            <i
                              class={['Lindadayo-tooltip-icon', typeof item.icon === 'function' ? item.icon(scope.row) : item.icon]}
                              plain='true'
                              v-permission={item.permission ?? ''}
                              onClick={() => methods.handleTableButton(scope.row, item.methods)}
                            />
                          </el-tooltip>
                        )
                      })
                    }
                  </div>
                }
              }}
              >
            </el-table-column>
          }
        </el-table>
      </div>
    )
  }
})
